<template>
  <div class="ai-drawer-container">
    <div class="ai-drawer" :class="{ 'drawer-open': isOpen }">
      <div class="drawer-content">
        <!-- 修改drawer-header内部结构 -->
        <div class="drawer-header">
          <div class="header-content">
            <el-avatar shape="square" :size="42" src="/AI.png" class="ai-avatar" />
            <h3 class="ai-title">AI Assistant</h3>
            <el-tooltip 
              :content="currentMode === 'chat' ? '切换到推荐列表' : '切换到对话模式'" 
              placement="top"
            >
              <el-button 
                link 
                @click="toggleMode"
              >
                <el-icon>
                  <ChatLineRound v-if="currentMode === 'list'" />
                  <List v-else />
                </el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>

        <div class="drawer-body">
          <!-- 对话模式 -->
          <div v-if="currentMode === 'chat'" class="chat-container">
            <ChatBody :analysis="currentAnalysis" />
          </div>

          <!-- 列表模式 -->
          <div v-else class="list-container">
            <RecommendSpotsList 
              :spots="spotlist"
              @spot-click="handleSpotClick"
            />
          </div>
        </div>
      </div>

      <div class="drawer-handle" @click="toggleDrawer">
        <el-icon :size="20" class="handle-icon">
          <component :is="isOpen ? ArrowRight : ArrowLeft" />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<!-- 使用方式： -->
<!-- <AIDrawer v-model:mode="mode" :is-open="drawerOpen" /> -->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ArrowLeft, ArrowRight,ChatLineRound, List } from '@element-plus/icons-vue'
import ChatBody from './ChatBody.vue'
import RecommendSpotsList from './RecommendSpotsList.vue'

interface Props {
  mode?: 'chat' | 'list'
  isOpen?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  mode: 'chat',
  isOpen: false
})

const currentAnalysis = ref(null)
const emit = defineEmits(['update:mode', 'spot-search'])

const currentMode = ref(props.mode)
const isOpen = ref(props.isOpen)
const overallSuggestion = ref('')
const spotlist = ref([])

// 展示分析结果
const showAnalysis = (analysis) => {
  console.log('aidrawer:', analysis)
  currentAnalysis.value = analysis
  currentMode.value = 'chat'
  isOpen.value = true
}

// 展示景点列表
const showSpots = (spots) => {
  spotlist.value = spots.map(spot => ({
    name: spot.name,
    suggestion: spot.description // 将description映射为suggestion
  }))
  currentMode.value = 'list'
  isOpen.value = true
}

// 切换抽屉状态
const toggleDrawer = () => {
  isOpen.value = !isOpen.value
}

// 点击景点
const handleSpotClick = (spotName: string) => {
  emit('spot-search', spotName)
}
const toggleMode = () => {
  currentMode.value = currentMode.value === 'chat' ? 'list' : 'chat'
  emit('update:mode', currentMode.value)
}
// 监听模式变化
watch(() => props.mode, (newMode) => {
  currentMode.value = newMode
})

// 统一导出方法
defineExpose({
  open: () => isOpen.value = true,
  close: () => isOpen.value = false,
  setMode: (mode: 'chat' | 'list') => {
    emit('update:mode', mode)
    currentMode.value = mode
  },
  showAnalysis,
  showSpots
})
</script>
<style scoped>
.ai-drawer-container {
  position: fixed;
  top: 10px;
  right: 0;
  height: calc(100vh - 80px);
  /* 修改这里，使用视口高度 */
  pointer-events: none;
  z-index: 189;
}

/* 抽屉主体样式 */
.ai-drawer {
  position: absolute;
  width: 350px;
  height: 100%;
  right: -350px;
  /* 改用 right 定位，初始状态隐藏在右侧 */
  transition: right 0.3s ease;
  /* 改用 right 过渡 */
  pointer-events: auto;
  padding: 0 0 10px 0;
  box-sizing: border-box;
}

.header-content {
  display: flex;
  align-items: center;
  padding-right: 8px;
  gap: 4px;
  /* 设置头像和文字间距 */
}


.ai-title {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-right: 8px;
  /* 让标题占据剩余空间 */
}
.el-button {
  padding: 4px 8px;
  font-size: 18px;
}
.drawer-header {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  /* 设置圆角 */
  border-radius: 8px 8px 0 0;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  background-color: #eee;
  height: calc(100vh - 100px);
  /* padding: 16px; */
}

.drawer-handle {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  background: white;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  z-index: 191;
}

.drawer-open {
  right: 0;
  /* 打开状态移动到屏幕边缘 */
}

.handle-icon {
  color: #606266;
}

.overall-suggestion {
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 16px;
}

.spot-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.spot-item h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.spot-item p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.ai-avatar {
  flex-shrink: 0;
}
.chat-container,
.list-container {
    height: 100%;
}
</style>